
import Taro, {Component } from '@tarojs/taro'
import {View, Text, Image, ScrollView} from '@tarojs/components'
import {inject, observer} from '@tarojs/mobx'
import {getAvatar, pageSize, subTime, navigateTo, memberTypeArr } from "../../utils/common";
import { TeamOutput, GradeListOutput } from '../../api/api'

import {IStoreProps} from '../../store/Stores'

import './team.scss'

interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class OrderIndex extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    memberTypeArr: memberTypeArr,
    memberTypeArrFromHost: [] as GradeListOutput[],
    currentNavId: memberTypeArr[0]['id'],
    currentNavIndex: 0,
    items: [] as TeamOutput[],
    totalCount: 0,
    pageIndex: 1,
    pageSize
  }

  componentWillMount() {
    this.geTmemberTypeArrFromHost()
    this.getItems()
  }

  geTmemberTypeArrFromHost(): void {
    let { memberTypeArr } = this.state
    let { fishStore } = this.props.stores
    fishStore.gradeLists({
      callback: res => {
        res.unshift({ id: memberTypeArr[0]['id'], graName: memberTypeArr[0]['title'] })
        this.setState({memberTypeArrFromHost: res || []})
      }
    })
  }

  getItems(): void {
    let { pageIndex, pageSize, currentNavId } = this.state
    let {userStore} = this.props.stores
    userStore.userTeamPage({
      gradeId: currentNavId,
      pageIndex,
      pageSize,
      callback: res => {
        if (this.state.pageIndex === 1) {
          this.setState({totalCount: res.totalCount, items: res.items})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }


  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getItems()
      })
    }
  }

  changeCurrentNavId(id: string, index: number) {
    this.setState({
      currentNavId: id,
      currentNavIndex: index,
      pageIndex: 1,
      items: [],
    }, () => {
      this.getItems()
    })
  }


  link(url: string = '/pages/index/index'): void {
   navigateTo(url)
  }

  render() {
    let { memberTypeArr, memberTypeArrFromHost, items, currentNavId, currentNavIndex } = this.state
    let first = memberTypeArr[0]
    return (
      <View className='team page-bg'>
        <ScrollView className='scroll-view-nav' scrollX style={{background: '#ffffff',width: '100%'}}>
          {
            memberTypeArrFromHost.map((item, index) => {
              return(
                <View className={currentNavId===item.id?'scroll-item scroll-item-on':'scroll-item'} key={item.id} style={{width: 'auto', padding: '0 10px'}}
                      onClick={this.changeCurrentNavId.bind(this,item.id,index)}
                >{item.graName}<Text className='line' /></View>
              )
            })
          }
        </ScrollView>

        <View className='interval' />

        <View className='team__team-main'>
          {items.length <= 0 &&
          <View className='none'>
             <Image className='none__icon' src={require('../../assets/img/common/none.png')}/>
             <View className='none__desc desc'>暂时还没有团队成员哦！</View>
          </View>
          }
          {items.length > 0 &&
          <View className='list-06'>
            {
              items.map(item => {
                let tplGeneral =
                  <View className='list-06__item'>
                    <Image className='list-06__avatar' src={getAvatar(item.avatar)} />
                    <View className='list-06__r'>
                      <View className='list-06__info'>
                        <View className='list-06__title'>
                          <Text>{item.nickName} </Text>
                          <Text className='list-06__id'>{memberTypeArrFromHost[currentNavIndex]['graName']}</Text>
                        </View>
                        <View className='list-06__date font-dark'>{subTime(item.creationTime)}</View>
                      </View>
                      <View className='list-06__num'>{item.teamSize || 0}个成员</View>
                    </View>
                  </View>
                let tplMoney =
                  <View className='list-06__item' onClick={this.link.bind(this, '/pages/mine/teamMember?id=' + item.id)}>
                    <Image className='list-06__avatar' src={getAvatar(item.avatar)} />
                    <View className='list-06__r'>
                      <View className='list-06__info'>
                        <View className='list-06__title'>
                          <Text>{item.nickName} </Text>
                          <Text className='list-06__id'>{memberTypeArrFromHost[currentNavIndex]['graName']}</Text>
                        </View>
                        <View className='list-06__date font-dark'>{subTime(item.creationTime)}</View>
                      </View>
                      <View className='list-06__num icon-link-theme'>{item.teamSize || 0}个成员</View>
                    </View>
                  </View>
                return currentNavIndex === 0 ? tplGeneral : tplMoney
              })
            }
          </View>
          }
        </View>
        <View className='footer-block' />
        <View className='page-submit' onClick={this.link.bind(this, '/pages/share/index')}>+ 邀请好友</View>
      </View>
    )
  }
}

export default OrderIndex

